import React from 'react';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation'
import Home from "./page/home/Home";
import Ucenter from "./page/ucenter/Ucenter";
import {StatusBar, View, Easing, Animated} from "react-native";

import CardStackStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';
import Ionicons from 'react-native-vector-icons/Ionicons';

const RootStack = createStackNavigator(
    {
        Index: {
            screen: Home,

        },
        UserCenter: {screen: Ucenter,mode:'card'}
    },
    {
        initialRouteName: 'Index',

        navigationOptions: {
            // headerTransparent:"true",
            gesturesEnabled: false,
            gestureResponseDistance:{
                horizontal:50,
                vertical:50,
            },
            headerBackTitleVisible:true,
            headerBackTitle:"返回",
            headerStyle: {
                // backgroundColor: '#f4511e',
                backgroundColor: 'rgba(255,255,255,0)',
                paddingTop:26,
                height: 74,
                elevation: 0,
                shadowOffset: {width: 0, height: 0},
                shadowColor: 'black',
                shadowOpacity: 0,
                shadowRadius: 0
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                // fontWeight: 'bold',
                fontWeight: 'normal',
                fontSize: 16,
                alignSelf: 'center',
            },
        },

        headerMode:"float",
        headerBackTitleVisible:"false",
        headerTransitionPreset:"uikit",
        headerLayoutPreset:"center",
        transitionConfig: () => ({
            // transitionSpec: {
            //     duration: 400,
            //     easing: Easing.out(Easing.poly(4)),
            //     timing: Animated.timing,
            // },
            screenInterpolator: CardStackStyleInterpolator.forHorizontal
        })


    })

const TabNavigator = createBottomTabNavigator(
    {
        Home: RootStack,
        Settings: RootStack
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Home') {
                    iconName = `ios-information-circle${focused ? '' : '-outline'}`;
                } else if (routeName === 'Settings') {
                    iconName = `ios-options${focused ? '' : '-outline'}`;
                }

                // You can return any component that you like here! We usually use an
                // icon component from react-native-vector-icons
                return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
            },
        }),

        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        },
    }
);


export default class App extends React.Component {
    render() {
        return (
            <TabNavigator/>
        )
    }
}

